<template>
    <div>
        <h2>请选择要使用的信息</h2>
        <form @submit.prevent="submitForm">
            <label for="userSelect">选择用户:</label>
            <select v-model="selectedUserIndex" id="userSelect" @change="updateSelectedUser">
                <option v-for="(user, index) in usersData" :key="index" :value="index">{{ user.USER_ACCOUNT }}</option>
            </select>
            <br /><br />
            <label for="username">用户名:</label>
            <input type="text" v-model="localUsername" id="USER_ACCOUNT" name="USER_ACCOUNTS" />
            <label for="PASSWORD">密码:</label>
            <input type="text" v-model="selectedUser.PASSWORD" id="PASSWORD" name="PASSWORDS" />
            <label for="CAPTCHA">令牌:</label>
            <input type="text" v-model="selectedUser.CAPTCHA" id="CAPTCHA" name="CAPTCHAS" />
            <label for="LOGIN_URL">登录URL:</label>
            <input type="text" v-model="selectedUser.LOGIN_URL" id="LOGIN_URL" name="LOGIN_URL" />
            <label for="TARGET_URL">目标URL:</label>
            <input type="text" v-model="selectedUser.TARGET_URL" id="TARGET_URL" name="TARGET_URL" />
            <input type="submit" value="提交" />
        </form>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
type User = {
    LOGIN_URL: string;
    TARGET_URL: string;
    USER_ACCOUNT: string;
    PASSWORD: string;
    CAPTCHA: string;
};

const usersData = ref<User[]>([]);
const selectedUserIndex = ref(0);
const selectedUser = ref<User>({ USER_ACCOUNT: '', PASSWORD: '', CAPTCHA: '', LOGIN_URL: '', TARGET_URL: '' });
const localUsername = ref('');
const fetchUsers = async () => {
    try {
        const response = await fetch('/api/get_users');
        if (!response.ok) throw new Error('Network response was not ok');
        usersData.value = await response.json();
        selectedUser.value = usersData.value[0];
        localUsername.value = selectedUser.value.USER_ACCOUNT;
    } catch (error) {
        console.error('Error:', error);
    }
};

const updateSelectedUser = () => {
    selectedUser.value = usersData.value[selectedUserIndex.value];
    localUsername.value = selectedUser.value.USER_ACCOUNT;
};

const submitForm = async () => {
    selectedUser.value.USER_ACCOUNT = localUsername.value;
    try {
        const response = await fetch('/api/submitConfigure', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(selectedUser.value),
        });
        if (response.ok) {
            console.log('配置提交成功');
            setTimeout(() => {
                fetchUsers();
            }, 2000);
        } else {
            console.error('配置提交失败');
        }
    } catch (error) {
        console.error('发生错误:', error);
        alert('发生错误，请检查控制台');
    }
};

onMounted(() => {
    fetchUsers();
});
</script>

<style scoped>
/* 设置整体背景颜色 */
body {
    background-color: #f4f4f9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 设置表单容器样式 */
form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    margin: 20px auto;
}
/* 设置标签样式 */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    text-align: left;
}
/* 设置输入框样式 */
input[type='text'],
select {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
/* 设置提交按钮样式 */
input[type='submit'] {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}
/* 设置提交按钮悬停样式 */
input[type='submit']:hover {
    background-color: #0056b3;
}
/* 设置标题样式 */
h1 {
    text-align: center;
    color: #333;
}
</style>
